/* eslint-disable react/react-in-jsx-scope */
import React, { Component } from 'react';
import { Picker, List, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';
import arrayTreeFilter from 'array-tree-filter';
// import { district } from "./../compile/data/cityData.json";
const district = require('./../compile/data/cityData.json');

class Test extends Component {
  state = {
    data: [],
    cols: 1,
    pickerValue: this.props.address != undefined ? this.props.address : [],
    asyncValue: [],
    visible: false,
  };
  onClick = () => {
    setTimeout(() => {
      this.setState({
        // eslint-disable-next-line no-undef
        data: province,
      });
    }, 120);
  };

  getSel() {
    const value = this.state.pickerValue;
    if (!value) {
      return '';
    }
    const treeChildren = arrayTreeFilter(district, (c, level) => c.value === value[level]);
    console.log(treeChildren, 55)
    return treeChildren.map(v => v.label).join(',');
  }
  cityChange(v) {
    this.setState({
      pickerValue: v
    });
    this.props.cityChange(v);
  }
  render() {
    const { getFieldProps } = this.props.form;
    return (<div style={{ flex: 1 }}>
      <List style={{ backgroundColor: 'white' }} className="picker-list">
        <Picker
          visible={this.state.visible}
          data={district}
          value={this.state.pickerValue}
          onChange={v => this.cityChange(v)}
          onOk={() => this.setState({ visible: false })}
          onDismiss={() => this.setState({ visible: false })}
        >
          <List.Item className="css" arrow="horizontal" extra={this.getSel()} onClick={() => this.setState({ visible: true })}>
            开户地区
          </List.Item>
        </Picker>
      </List>
    </div>);
  }
}

const TestWrapper = createForm()(Test);

export default TestWrapper;